<template>
  <div class="lock-app">
    <div class="lock-form">
      <div :class="{ error: passwdError, pass: pass }">
        <h3 class="title">{{ sysUser.realName }}</h3>
        <ElInput
          v-model="passwd"
          placeholder="请输入登录密码"
          type="password"
          class="input-with-select"
          @keyup.enter.native="handleLogin">
          <template #append>
            <ElButton icon="el-icon-unlock" style="font-size: 18px" @click="handleLogin" />
            <ElButton icon="icon-tuichu" @click="handleLogout" />
          </template>
        </ElInput>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapMutations, mapActions } from 'vuex'

  export default {
    name: 'LockApp',
    data() {
      return {
        passwd: '',
        passwdError: false,
        pass: false
      }
    },
    computed: {
      ...mapState('user', ['sysUser']),
      ...mapState('common', ['lockPath', 'lockPasswd'])
    },
    methods: {
      ...mapMutations('common', ['clearLock']),
      ...mapActions('user', ['handleLogout']),
      async handleLogout() {
        await this.$confirm('是否退出系统, 是否继续?', '提示', { type: 'warning' })
        await this.handleLogout()
        await this.$router.push({ path: '/login' })
      },
      handleLogin() {
        if (this.passwd !== this.lockPasswd) {
          this.passwd = ''
          this.$message.error('解锁密码错误,请重新输入')
          this.passwdError = true
          setTimeout(() => {
            this.passwdError = false
          }, 1000)
          return
        }
        this.pass = true

        this.clearLock()
        this.$router.push(this.lockPath)
      }
    }
  }
</script>

<style lang="scss">
  .lock-app {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .title {
      margin-bottom: 8px;
      text-align: center;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -999;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/images/login.png');
      background-size: cover;
      content: '';
    }

    .lock-form {
      width: 300px;
    }
  }
</style>
